import React, { Component } from 'react'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'
import { BottomTabBar } from 'react-navigation-tabs'
import { connect } from 'react-redux'
import EventBus from 'react-native-event-bus'
import Entypo from 'react-native-vector-icons/Entypo'
import Ionicons from 'react-native-vector-icons/Ionicons'
import EventTypes from '../util/EventTypes'
import PopularPage from '../page/PopularPage'
import TrendingPage from '../page/TrendingPage'
import FavoritePage from '../page/FavoritePage'
import MyPage from '../page/MyPage'

const TABS = {
	PopularPage: {
		screen: PopularPage,
		navigationOptions: {
			tabBarLabel: '最热',
			tabBarIcon: ({ tintColor, focused }) => {
				return (
					<MaterialIcons
						name={'whatshot'}
						size={26}
						style={{ color: tintColor }}
					/>
				)
			}
		}
	},
	TrendingPage: {
		screen: TrendingPage,
		navigationOptions: {
			tabBarLabel: '趋势',
			tabBarIcon: ({ tintColor, focused }) => {
				return (
					<Ionicons
						name={'md-trending-up'}
						size={26}
						style={{ color: tintColor }}
					/>
				)
			}
		}
	},
	FavoritePage: {
		screen: FavoritePage,
		navigationOptions: {
			tabBarLabel: '收藏',
			tabBarIcon: ({ tintColor, focused }) => {
				return (
					<MaterialIcons
						name={'favorite'}
						size={26}
						style={{ color: tintColor }}
					/>
				)
			}
		}
	},
	MyPage: {
		screen: MyPage,
		navigationOptions: {
			tabBarLabel: '我的',
			tabBarIcon: ({ tintColor, focused }) => {
				return (
					<Entypo name={'user'} size={26} style={{ color: tintColor }} />
				)
			}
		}
	}
}

class DynamicTabNavigator extends Component {
	constructor(props) {
		super(props)
		console.disableYellowBox = true
	}

	_tabNavigator() {
		//这里做个判断，不然后面通过redux修改theme的时候会触发重新渲染（重新渲染体验不好）
		if (this.Tabs) {
			return this.Tabs
		}
		const { PopularPage, TrendingPage, FavoritePage, MyPage } = TABS
		//根据需要动态定制显示的tab
		const tabs = { PopularPage, TrendingPage, FavoritePage, MyPage }
		PopularPage.navigationOptions.tabBarLabel = '最热' //动态配置tab属性

		return (this.Tabs = createAppContainer(
			createBottomTabNavigator(tabs, {
				tabBarComponent: props => {
					return <TabBarComponent {...props} theme={this.props.theme} />
				}
			})
		))
	}

	render() {
		const Tab = this._tabNavigator()
		return (
			<Tab
				onNavigationStateChange={(prevState, newState, action) => {
					//发送底部tab切换的事件
					EventBus.getInstance().fireEvent(EventTypes.bottom_tab_select, {
						from: prevState.index,
						to: newState.index
					})
				}}
			/>
		)
	}
}

//底部tab自定义
class TabBarComponent extends Component {
	constructor(props) {
		super(props)
		this.theme = {
			tintColor: props.activeTintColor,
			updateTime: new Date().getTime()
		}
	}

	render() {
		//这里是主题色是通过redux来的
		return <BottomTabBar {...this.props} activeTintColor={this.props.theme} />
	}
}

//state.theme 代表theme reducer
//订阅
const mapStateToProps = state => ({
	theme: state.theme.theme
})
export default connect(mapStateToProps)(DynamicTabNavigator)
